import React from "react";
import { List } from "antd";
import axios from "axios";
import Avatar from "antd/lib/avatar/avatar";
// import { List, Avatar, Button, Skeleton } from 'antd';
// const { Item } = List;
// const count = 3;
// const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;

export default class ArticleList extends React.Component {
  state = {
    initLoading: true,
    loading: false,
    data: [],
    list: [],
  };

  componentDidMount() {
    axios
      .get("./topics", { params: { page: 1, tab: "", limit: 15 } })
      .then(({ data }) => {
        console.log(data.data);
        this.setState({
          list: data.data,
          initLoading: false,
        });

        // console.log(this.state.list);
      });
  }

  //   onLoadMore = () => {
  //     this.setState({
  //       loading: true,
  //       list: this.state.data.concat(
  //         [...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
  //       ),
  //     });
  //     fetch(fakeDataUrl)
  //       .then(res => res.json())
  //       .then(res => {
  //         const data = this.state.data.concat(res.results);
  //         this.setState(
  //           {
  //             data,
  //             list: data,
  //             loading: false,
  //           },
  //           () => {
  //             // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
  //             // In real scene, you can using public method of react-virtualized:
  //             // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
  //             window.dispatchEvent(new Event('resize'));
  //           },
  //         );
  //       });
  //   };

  render() {
    const { initLoading, loading, list } = this.state;
    // console.log(list);
    // const loadMore =
    //   !initLoading && !loading ? (
    //     <div
    //       style={{
    //         textAlign: "center",
    //         marginTop: 12,
    //         height: 32,
    //         lineHeight: "32px",
    //       }}
    //     >
    //       {/* <Button onClick={this.onLoadMore}>loading more</Button> */}
    //     </div>
    //   ) : null;

    return (
      <List
        className="demo-loadmore-list"
        loading={initLoading}
        itemLayout="horizontal"
        dataSource={list}
        renderItem={(item, indx) => {
          console.log();
          return (
            <List.Item
              key={indx}
              actions={[
                <a key="list-loadmore-edit">edit</a>,
                <a key="list-loadmore-more">more</a>,
              ]}
            >                
              <List.Item.Meta
                avatar={<Avatar src={item.author.avatar_url} />}
                title={<div>{item.title}</div>}
              >                 
              </List.Item.Meta>
            </List.Item>
          );
        }}
      />
    );
  }
}
